<template>
  <div>
    <Cartgory />
    <!-- 条件渲染 -->
    <SpuList
      v-if="Condition.SpuList === showCondition"
      @changeConditionEvent="changeConditionEvent"
    />
    <SpuForm
      v-if="Condition.SpuForm === showCondition"
      :spuInfo="spuInfo"
      @changeConditionEvent="changeConditionEvent"
    />
    <SkuForm
      v-if="Condition.SkuForm === showCondition"
      :spuInfo="spuInfo"
      @changeConditionEvent="changeConditionEvent"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useCartgoryStore } from "@/stores/cartgory";
import { storeToRefs } from "pinia";

export default defineComponent({
  name: "Spu",
});
</script>

<script setup lang="ts">
import SpuList from "./SpuList/index.vue";
import SpuForm from "./SpuForm/index.vue";
import SkuForm from "./SkuForm/index.vue";

import { ref } from "vue";
/* 条件渲染枚举数据 */
import { Condition } from "./type";

import type { SpuInfoType } from "@/api/product/interface";

/* pinia */
const cartgoryStore = useCartgoryStore();
const { category3Id } = storeToRefs(cartgoryStore);

const showCondition = ref(0);
const spuInfo = ref<SpuInfoType>({
  category3Id: category3Id.value,
  description: "",
  spuName: "",
  tmId: null,
  spuImageList: [],
  spuSaleAttrList: [],
});
/* 条件切换视图 */
const changeConditionEvent = (
  condition: Condition,
  backfillData?: SpuInfoType
) => {
  // 切换组件
  showCondition.value = condition;
  // 判断是新增还是修改(是否有回填的数据)
  if (backfillData) {
    spuInfo.value = backfillData;
  } else {
    // 没有表明是新增(清除修改残留的数据)
    spuInfo.value = {
      category3Id: category3Id.value,
      description: "",
      spuName: "",
      tmId: null,
      spuImageList: [],
      spuSaleAttrList: [],
    };
  }
};
</script>
